<template>
  <div class="toolTipBox" v-if="httpsData.isShow">
    <div class="toolTip_content">
      <div class="toolTip_head">
        {{$t('httpsToolTip.toolTipHead')}}
        <i class="icon iconfont icon-guanbi" @click="canclejump"></i>
      </div>
      <!--<div class="timeProgress">-->
        <!--<div class="charts">-->
          <!--<div class="wrap">-->
            <!--<div class="circle" :style="{clip: circle0 }">-->
              <!--<div class="percent left" :style="{ transform: 'rotate('+18/5*secondTime/5*100+'deg)'}"></div>-->
              <!--<div class="percent right" :style="{ width: wth0 }"></div>-->
            <!--</div>-->
            <div class="num"><span>{{percent}}</span></div>
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <div class="toolTip_body">
        <h3 v-html="$t('httpsToolTip.httpsReasonTitle',{secondTime})"></h3>
        <div class="reason">
          <p>{{$t('httpsToolTip.reasons')}}</p>
          <p>{{$t('httpsToolTip.reason1')}}</p>
          <p>{{$t('httpsToolTip.reason2')}}</p>
          <div class="jumpBtn">
            <button class="link active jumpToHttp" @click="jump">{{$t('httpsToolTip.jumpImmediately')}}</button>
            <button class="link cancelJump" @click="canclejump">{{$t('httpsToolTip.cancleJump')}}</button>
          </div>
          <div class="notice">
            <P>{{$t('httpsToolTip.httpsNotice')}}</P>
            <p>{{$t('httpsToolTip.contactUs')}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        secondTime: 5,
        secondTimes: 5 + 'S',
        circle0: 'auto',
        wth0: '40px',
        timerArr: [],
        timer: ''
      }
    },
    props: {
      httpsData: {
        type: Object,
        default: function () {
          return {
            isShow: false,
            alink: ''
          }
        }
      }
    },
    computed: {
      percent: function () {
        let watc = this.httpsData.isShow
        if (watc) {
          let self = this
          this.timer = setInterval(function () {
            self.secondTime--
            self.secondTimes = self.secondTime + 'S'
            if (self.secondTime < 3) {
              self.circle0 = ''
              self.wth0 = 0
            } else {
              self.circle0 = 'auto'
              self.wth0 = '40px'
            }
            if (self.secondTime === 0) {
              self.secondTime = 0
              self.secondTimes = '0S'
              window.location.href = self.httpsData.alink
              document.getElementsByClassName('jumpToHttp')[0].disabled = true
              document.getElementsByClassName('jumpToHttp')[0].style.cursor = 'default'
              clearInterval(self.timer)
            }
          }, 1000)
        }
      }
    },
    methods: {
      canclejump () {
        this.$emit('isGoto', false)
        this.httpsData.isShow = false
        this.secondTime = 5
        clearInterval(this.timer)
        document.getElementsByClassName('jumpToHttp')[0].disabled = true
        document.getElementsByClassName('jumpToHttp')[0].style.cursor = 'default'
      },
      jump () {
        window.location.href = this.httpsData.alink
        this.$emit('isGoto', true)
        clearInterval(this.timer)
        document.getElementsByClassName('cancelJump')[0].disabled = true
        document.getElementsByClassName('cancelJump')[0].style.cursor = 'default'
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .toolTipBox
    z-index: 19921;
    position fixed
    left 0
    top 0
    width 100%
    height 100%
    background-color rgba(0,0,0,.5)
    .wtd0
      width 0!important
    .toolTip_content
      border-radius 4px
      position fixed
      left 50%
      top 50%
      margin-left -300px
      margin-top -150px
      width 600px
      height 300px
      padding-bottom 20px
      background-color $cf-white
      .toolTip_head
        height 36px
        line-height 36px
        text-indent 15px
        border-radius 4px
        background-color $c-back
        font-weight bold
        margin-bottom 5px
        .icon-guanbi
          position absolute
          right 10px
          top 0
          color #a7a7a7
          cursor pointer
      .timeProgress
        width 40px
        height 40px
        right 50px
        position absolute
        .charts
          position relative
          .wrap
            position relative
            background-color #f7f7f7
            width 40px
            height 40px
            border-radius 50%
            position absolute
            .circle
              box-sizing border-box
              border 3px solid #f7f7f7
              clip rect(0, 40px, 40px, 20px)
              width 40px
              height 40px
              border-radius 50%
              position absolute
              .percent
                position absolute
                width 40px
                height 40px
                border-radius 50%
            .clip-auto
              clip rect(auto, auto, auto, auto)
            .percent
              box-sizing border-box
              top -3px
              left -3px
            .left
              transition transform ease
              border 3px solid #ff9103
              clip rect(0, 20px, 40px, 0)
            .right
              border 3px solid #ff9103
              clip rect(0, 40px, 40px, 20px)
            .num
              display none
              position absolute
              box-sizing border-box
              width 34px
              height 34px
              line-height 34px
              text-align center
              font-size 12px
              left 3px
              top 3px
              border-radius 50%
              background-color $cf-white
              color #a7a7a7
              z-index 1
          .timeshow
            position absolute
            width 26px
            height 26px
            left 50%
            top 50%
            margin-left -13px
            margin-top -13px
            background-color $cf-white
            line-height 26px
            text-align center
      .toolTip_body
        padding 20px 15px 10px
        h3
          font-size 16px
          line-height 24px
          color $cf-level1
          margin-bottom 10px
        .reason
          padding 0 18px
          line-height 21px
          color $cf-level1
        .jumpBtn
          padding 13px 0
          text-align center
          .link
            display inline-block
            background-color $cf-white
            border 1px solid $c-main
            border-radius 21px
            padding 11px 42px
            box-shadow none
            color $c-main
            font-size 14px
            margin 0 15px
            cursor pointer
          .link:hover,.active
            background-color $c-main
            color $cf-white
        .notice
          text-align center
          color #979797
</style>
